<template>
    <div class="mr-root">
      <pheader></pheader>
      <div class="content" v-for="a in shu">
           <router-link :to="/Content/+a.id+'/'+a.name"> 
          <div class="img">
              <img :src=a.images alt="">
          </div>
           </router-link>
          <div class="er">
              <div class="title">
                  <h2>{{a.name}}</h2> <span>{{a.updateInfo}}</span>
              </div>
              <p class="e"><span>作者:</span>{{a.author}}</p>
              <p class="f"><span>类型:</span>{{a.categoryLabel}}</p>
              <p class="nei">{{a.introduction}}</p>
          </div>
             
      </div>
      <div class="jiazai" @click="loadmore">点击加载更多</div>
      <div class="kong"></div>
      <loading v-if="isload"></loading>
      <pfooter></pfooter>
      <back-top></back-top>
    </div>
</template>
<script>
    import Pheader from '../components/Header'
    import Pfooter from '../components/Footer'
     import BackTop from '../components/BackTop'
     import Loading from '../components/Loding'
    export default{
         data(){
         return {
          showload: true,
          shu:[],
          more:1,
          isload:true
         }  
       },
        components:{
           Pheader,Pfooter,BackTop,Loading
        },
        created(){
             this.duo(this.more)
        },
        methods:{
             duo(page){
this.axios.get('https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=4&page='+page+'&size=10')
              .then(data=>{
                  this.shu=this.shu.concat(data.data.results)
                  this.isload=false
                   console.log(this.shu)
              })
              .catch(err=>{
                  console.log(err)
              })
             },
             loadmore(){
                  this.more++
                  console.log(this.more)
                this.duo(this.more)
             }
            
        }
        
    }
</script>
<style scoped>
   .mr-root{
       margin-top: 2.1rem;
   }
   .content{
       display: flex;
   }
   .jiazai{
      line-height: 0.7rem;
       width: 2rem;
       background: #ff4f65;
       color: white;
       text-align: center;
       margin:0.3rem auto;
       border-radius: 7px;
   }
   .kong{
       height: 51px;
       width: 100%;
   }
   .img{
       flex-basis: 20%;
       margin-right: 0.5rem;
       margin-left: 0.5rem;
       margin-bottom: 0.1rem;
   }
   .img>img{
       margin-top: 0.2rem;
       width:2rem;
       height: 3rem;
   } 
   .content{
       border-bottom: solid 1px #ccc;
   }
  .title>h2{
      position: relative;
      top:0.1rem;
  }
  .er p{
      position: relative;
      top:1rem;
  }
  .er>p.e{
      position: relative;
      top:0.5rem;
  }
  .er>p.f{
      position: relative;
      top:0.6rem;
  }
   .title span{
       display: inline-block;
       position: absolute;
       right: 0.3rem;
       border-radius: 6px 0 6px 0;
       text-align: center;
       line-height: 0.55rem;
       width: 2.3rem;
       background: #ff4f65;
       color: white;
   }
   .er .nei{
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       width: 6.2rem;
       color: gray;
   }
</style>
